import React, { useState, useEffect } from 'react';
import Footer from '../../components/footer/footer';
import Clock from '../../components/clock/clock';
import 健身1 from "../../assets/homeimg/健身1.webp"
import 健身2 from "../../assets/homeimg/健身2.jpg"

function Home() {
  const [dateString, setDateString] = useState("");
  const [showModal, setShowModal] = useState(false); // 初始时不显示弹框

  // 组件渲染时更新日期
  useEffect(() => {
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = ("0" + (currentDate.getMonth() + 1)).slice(-2);
    const day = ("0" + currentDate.getDate()).slice(-2);
    setDateString(year + "-" + month + "-" + day);
  }, []);

  return (
    <div className="home">
      <div style={{display:'flex'}}>
          <div style={{width:"40%",height:"100px", color:'#fff',border: "2px solid #fff", borderRadius:'20px',display:"flex",justifyContent:"center",alignItems:"center",marginTop:"40px",marginLeft:"10px"}}>
            Welcome
          </div>
          <Clock/>
      </div>
      <div style={{display:'flex'}}>
          <div style={{width:"40%",height:"100px", color:'#fff',border: "2px solid #fff", borderRadius:'20px',display:"flex",justifyContent:"center",alignItems:"center",marginTop:"-67px",marginLeft:"10px"}}>
            {dateString}
          </div>
          <div style={{width:"50%",height:"40px", color:'#fff',border: "2px solid #fff", borderRadius:'20px',display:"flex",justifyContent:"center",alignItems:"center",marginTop:"48px",marginLeft:"10px",paddingLeft:'20px',paddingRight:'10px'}}>
              Last Log-in time : {dateString}
          </div>
      </div>
      {Array(5).fill().map((_, index) => (
        <div key={index} style={{ display: "flex", marginTop: "50px", marginBottom: "60px" }}>
          <div style={{ width: "47%", height: "100px", border: '1px solid #fff', borderRadius: "20px" }}>
            <img style={{ width: "100%", height: "100px", borderRadius: "20px" }} src={健身1} alt="" onClick={() => setShowModal(true)} />
          </div>
          <div style={{ width: "6%" }}></div> {/* 两张图片之间的间距 */}
          <div style={{ width: "47%", height: "100px", border: '1px solid #fff', borderRadius: "20px" }}>
            <img style={{ width: "100%", height: "100px", borderRadius: "20px" }} src={健身2} alt="" onClick={() => setShowModal(true)} />
          </div>
        </div>
      ))}
      {showModal && (
        <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.5)', zIndex: 1 }}>
          <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', backgroundColor: '#fff', padding: '20px', borderRadius: '10px' }}>
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '10px' }}>
              <div style={{cursor:'pointer',fontSize:"20px",position:"relative",left:"10px",bottom:"20px"}} onClick={() => setShowModal(false)}>x</div> {/* 点击关闭按钮关闭弹框 */}
            </div>
            <div>
              <h2 style={{marginTop:'-20px'}}>运动新闻</h2>
              <div style={{width:"300px",height:"500px", overflow: 'auto'}}>
              看了9号中国足球的那一集，我的感觉真像一些人说的，三观都震碎了。合着大家这些年很多时候看的就是假球表演？那些时候，我们的愤怒、流泪以及相反的欣喜若狂都像傻子一样是被人耍出来的？就算大家平时有对假球的质疑，也想不到会是这种规模的呀！
              当书记、主席和主教练一起贪腐的时候，我们的确可以怀疑中国足球“烂到了根子上”。这样一帮人怎么可能带着中国足球朝着世界杯的光荣进发呢？
              “机关算尽太聪明”，然而实际上我想说，从李铁开始，那些涉案人都蠢得可怜，智商和情商都欠费。中国足球成绩这么差，整个舆论怨声载道，对“假哨”“假球”的指控不绝于耳，李铁这些人处于多么敏感、脆弱、矛盾交织的处境。这种情况下，就算谨慎做人，都有可能被误解构陷，直至飞来横祸，他们这些人却敢放开胆子行贿受贿，制造假球，而且干得比公众想象得还要放肆、无耻，他们这不是找死吗？
              这些人脚下的台子早已在抖动了，风在呼啸，电闪雷鸣，他们竟然觉得很安全，都是“老规矩”。李铁花300万买国足主教练位置，陈戌源当选足协主席的前一晚就有两人送来各30万元，他就敢心安理得地收下，而且这些都是十八大、十九大之后已有无数贪官落马，前车之鉴的情况下发生的事情。我觉得，李铁、陈戌源、杜兆才等简直就是疯了，是完全意义上的利令智昏。
              其实，中国人当中的球迷很多，足球市场足够大，而且随着经济发展，投入足球的资金越来越多，有一个好规则，大家都按规矩来，挣的钱同样少不了。一旦出成绩，公众高兴了，足球界的整体收入只会更高。为什么要从上层带头破坏规矩，把一切搞得如此狗血，到头来这么多业内精英们一起完蛋，身败名裂成为阶下囚呢？
              足协最上层就如此不干净，国足主教练就是“假球大王”，整个男足能不乌烟瘴气吗？
              足球的事情在警示我们，不正之风是多么可怕，它会腐蚀基层和基础，一旦利益在某一个位置大量汇集，就会形成有致命后果的腐败。而法不责众永远都不会是真正的规则。干坏事哪有什么“老规矩”？一起干坏事的人多，那就一起处理好了。
              中国足球被揭开盖子，展示了一个巨大的悲剧。老胡希望，这一次的警钟能够传得很远，深入人心。
              </div>
            </div>
          </div>
        </div>
      )}
      <Footer />
    </div>
  );
}

export default Home;
